import styled from 'styled-components';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Pagination } from 'antd';

import { G01Search, SearchResultHeader, SearchResultList } from './components';
import { SharedObject, sharingGetSharedObjects } from '../../services';

export const DiscoveryResultPage = () => {

    const navigate = useNavigate();

    const params: any = useParams();

    const [keywords, setKeywords] = useState<string | null>(params.keywords);

    const [loading, setLoading] = useState<boolean>(false);

    const [category, setCategory] = useState<string>(params.category);

    const [pageSize, setPageSize] = useState<number>(20);

    const [page, setPage] = useState<number>(1);

    const [total, setTotal] = useState<number>(0);

    const [data, setData] = useState<Array<SharedObject>>([]);

    const refresh = async (keywords: string, category: string, page: number, pageSize: number) => {
        console.log(keywords, category);
        if (!keywords || keywords == '') {
        }
        //
        let objectType: string | undefined = category;
        if (objectType === '全部') {
            objectType = undefined;
        }
        setLoading(true);
        try {
            let data = await sharingGetSharedObjects({
                keywords: keywords,
                objecct_type: objectType
            }, page, pageSize);
            setTotal(data.total);
            setData(data.data);
        } catch (error) {

        }
        setLoading(false);
    }

    useEffect(() => {
        refresh('', category, page, pageSize);
    }, []);

    return (
        <Container>
            <Header>
                <SearchContainer>
                    <G01Search keywords={keywords} categoryPosition={'bottom'} category={category} onChange={async (keywords, category) => {
                        //
                        await refresh(keywords, category, page, pageSize);
                    }}></G01Search>
                </SearchContainer>
                <Buttons>

                </Buttons>
            </Header>
            <ResultContainer>
                <SearchResultList data={data}></SearchResultList>
                <StyledPagination
                    showSizeChanger={true}
                    defaultCurrent={page}
                    current={page}
                    pageSize={pageSize}
                    total={total}
                    onChange={(page, pageSize) => {
                        setPage(page);
                    }}
                    onShowSizeChange={(current, size) => {
                        setPageSize(size);
                    }}
                ></StyledPagination>
            </ResultContainer>
        </Container>
    );
}

export default DiscoveryResultPage;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    padding:10px 10px;
`;

const SearchContainer = styled.div`
    flex:1;
    display: flex;
    align-items: center;
`;

const Header = styled.div`
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
`;

const Buttons = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
`;

const ResultContainer = styled.div`
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
`;

const StyledPagination = styled(Pagination)`
    
`;